﻿<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no" />
  <title>标签</title>
  <link rel="stylesheet" type="text/css" href="../plugins/weui/css/weui.min.css">
  <link rel="stylesheet" type="text/css" href="../css/base.css">
  <link rel="stylesheet" type="text/css" href="../css/css.css">
    <link rel="stylesheet" href="../plugins/dropload/css/mescroll.min.css">
    <script src="../plugins/dropload/js/mescroll.min.js"></script>
    <style>
        body {
            background-color: #FFFFFF;
            width: 100%;
            height: 100vh;
            overflow-x: hidden;
        }

        .weui-cells {
            margin-top: 0px;
            width: 95%;
            float: right;
        }

        .flex-col {
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
        }
        .mescroll-upwarp {display:none;}
    </style>
</head>

<body>
  <!--<div class="container">
    <div class="weui-cells">
    </div>
  </div>-->
    <div id="mescroll" class="mescroll">
        <!--展示上拉加载的数据列表-->
        <div class="weui-cells">
        </div>
    </div>
  <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../js/base.js"></script>
  <script type="text/javascript">
    function toNewLabel() {
      window.location.href = "newLabel.html";
    }

    var mescroll = new MeScroll("mescroll", {
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            use: false
        },
        up: {
            page: {
                num: 0, //当前页码,默认0,回调之前加1,即callback(page)从1开始;
                size: 20, //每页数据的数量; 
                time: null //加载第一页数据服务器返回的时间 (可空); 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
            },
            offset: 50, //列表滚动到距离底部小于100px,即可触发上拉加载的回调
            auto: true, //初始化完毕,是否自动触发上拉加载的回调
            isBoth: false, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
            callback: load, //上拉加载的回调
            autoShowLoading: true
        }
    });

    function load(page) {
        var html = "";
        ajaxGet(siteApiList.TagRelationList + '?staffid=' + staffId + '&page=' + page.num, function (data) {
            if (!isJsonSuccess(data)) {
                mescroll.endErr();
                return;
            } else {
                mescroll.endSuccess(data.Data == null ? 0 : data.Data.length);
                $('.weui-cells').append(function () {
                    var arr = [];
                    if (page.num == 1)
                        arr.push('<a class="weui-cell weui-cell_access" href="newLabel.html"><div class="weui-cell__hd"><img src="../images/pk/111.png" alt="" style="width:20px;margin-right:10px;display:block;" onclick="toNewLabel()"></div><div class="weui-cell__bd"><p style="color:orange" >新建标签</p></div></a>');
                    $.each(data.Data, function (index, item) {
                        var arrs = [];                        
                        var str = '<a class="weui-cell weui-cell_access flex-col" href="newLabel.html?Id=' + item.Tag.Id + '"><div class="weui-cell__hd" style="color:black;font-size:16px;">'
                            + item.Tag.TagName + '(' + item.relations.length + ')</div><div class="weui-cell__bd" style="color:#767676;font-size:12px">';
                        $.each(item.relations, function (indexs, items) {
                            arrs.push(items.NickName);
                        })
                        str += arrs.join(',') + '</div>';
                        arr.push(str);
                    });
                    return arr.join('');
                });
            }
        })
    }

  
  </script>
</body>

</html>
